<template>
  <div class="top-card">
    <div class="top-card-label">{{ $t('总资产折合') }}</div>
    <div class="top-card-total">≈{{ currency.symbol }}{{ calcTotalMoney | currency() }}</div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState({
      currency: ({ currency }) => currency,
      usd2cny: ({ market }) => market.usd2cny
    }),
    ...mapGetters({
      calcTotalMoney: 'fund/calcTotalMoney'
    })
  }
}
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.top-card {
  height: 116px;
  padding: 36px 0 22px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.top-card-label {
  color: #264258;
  font-size: 18px;
  font-weight: bold;
}
.top-card-total {
  color: #727272;
  font-size: 16px;
}
</style>
